<!--  -->
<template>
  <div>
    <cu-custom
      :bgImage="bgImage"
      :needBack="true"
      bgColor="bgNormal"
      topTitle="账号与安全"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <view class="content">
      <view class="content_title"> 请设置登录密码 </view>
      <u-form
        :model="form"
        ref="uForm"
        id="uForm"
        label-width="160"
        :label-style="{
          color: '#666',
        }"
      >
        <view class="form-item">
          <u-form-item label="原密码" prop="password">
            <u-input
              v-model="form.password"
              placeholder="填写原密码"
              password-icon
              type="password"
              maxlength="11"
            />
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="新密码" prop="newPassword">
            <u-input
              v-model="form.newPassword"
              placeholder="填写新密码"
              password-icon
              type="password"
              maxlength="11"
            />
          </u-form-item>
        </view>
        <view class="form-item">
          <u-form-item label="确认密码" prop="password2">
            <u-input
              v-model="form.password2"
              password-icon
              type="password"
              maxlength="11"
              :border-bottom="false"
            />
          </u-form-item>
        </view>
      </u-form>
    </view>
    <view class="save">
      <button @click="save">完成</button>
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        password: "", // 原密码
        newPassword: "", // 新密码
        password2: "", // 确认密码
      },
    };
  },
  methods: {
    // 完成
    save() {
      if (!this.form.password) {
        return uni.showToast({
          title: "请输入原密码",
          icon: "none",
        });
      } else if (!this.form.newPassword) {
        return uni.showToast({
          title: "请输入新密码",
          icon: "none",
        });
      } else if (!this.form.password2) {
        return uni.showToast({
          title: "请输入确认密码",
          icon: "none",
        });
      } else if (this.form.newPassword !== this.form.password2) {
        return uni.showToast({
          title: "两次输入的密码不一致",
          icon: "none",
        });
      }
      console.log("完成");
      uni.navigateTo({
        url: "/packageA/login/index",
      });
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.content {
  color: #666;
  font-size: 28rpx;
  .content_title {
    padding-left: 29rpx;
    line-height: 94rpx;
    background: #f2f2f2;
    color: #333;
  }
  .form-item {
    padding: 12rpx 0 12rpx 34rpx;
    &:last-child {
      ::v-deep .u-border-bottom:after {
        border-bottom-width: 0;
      }
    }
  }
}
.save {
  button {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 93rpx;
    width: 310rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #417ffc, #505eeb);
    box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(22, 121, 253, 0.28);
    border-radius: 40rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
::v-deep {
  .u-form {
    background: #fff;
  }
  .u-input {
    padding-right: 20rpx !important;
  }
}
</style>